<template>
  <div class="login-container">
    <h2>学生登录</h2>
    <el-form>
      <el-form-item label="用户名" class="form-group">
        <el-input v-model="loginForm.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" class="form-group">
        <el-input v-model="loginForm.password" type="password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-checkbox v-model="flag" style="float: left">记住我</el-checkbox>
      </el-form-item>
      <el-form-item class="form-group">
        <el-button type="primary" @click="login_">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { login } from '@/api/student'
import { setToken } from '@/utils/auth'
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Login',
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      flag: false
    }
  },
  methods: {
    async login_() {
      // console.log('你好我执行了');
      try {
        const res = await login(this.loginForm)
        // console.log(res);
        this.$message.success('登录成功')
        this.$router.push('/Main')
        setToken(res.data)
        if (this.flag) {
          localStorage.setItem('account', JSON.stringify(this.loginForm))
        }
      }
      catch (err) {
        // console.dir(err);
        this.$message.error(err.response.data.msg)
      }
    }
  },
  mounted() {
    const temp = localStorage.getItem('account')
    if (temp) {
      this.loginForm.username = JSON.parse(temp).username
      this.loginForm.password = JSON.parse(temp).password
      this.flag = true
    }
  }
}
</script>

<style scoped>
.login-container {
  width: 380px;
  margin: 100px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  text-align: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 20px;
}
</style>
  